<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* 将元素变成怪异盒模型 */
        /* 将padding和border放在盒子的里面 */
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        background-color: lightcoral;
        border: 3px dashed #000;
        padding: 50px;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>padding详解</span>
    </div>
  </body>
</html>

<!-- 
    padding: 内间距(内填充),表示的是元素的内容到边框的空白的区域

    padding和border一样会使盒子变大
    padding是放不了内容的
    但是背景色是可以填充到padding上面的

    padding是不能加负数的

    单一方向添加padding
      padding-top
      padding-bottom
      padding-left
      padding-right

    可以添加多个参数
      1个 上下左右
      2个 上下 左右
      3个 上 左右 下
      4个 上 右 下 左

    很多时候，margin和padding都能够完成相同的事情
    padding是给父元素的
    margin是给子元素的
 -->
